<template>

	<div>

		<el-form ref="form" :model="rFrom" label-width="80px">
			<el-form-item label="项目名称">
				<el-input v-model="rFrom.name"></el-input>
			</el-form-item>
			<el-form-item label="类别" :label-width="formLabelWidth">

				<el-select v-model="rFrom.typeId" placeholder="请选择">
					<el-option v-for="item in typeList" :key="item.id" :label="item.name" :value="item.id">
					</el-option>
				</el-select>
			</el-form-item>
			<el-button type="primary" @click="findAllProject">查询</el-button>
		</el-form>

		<el-button type="text" @click="goAdd()"> 添加</el-button>
		<el-table :data="projectList" style="width: 100%">
			<el-table-column prop="id" label="ID" width="180">
			</el-table-column>
			<el-table-column prop="name" label="项目名称" width="180">
			</el-table-column>
			<el-table-column prop="budget" label="预算" width="180">
			</el-table-column>
			<el-table-column prop="endTime" label="截止时间" width="180">
			</el-table-column>

			<el-table-column prop="typeName" label="项目类型" width="180">
			</el-table-column>
			<el-table-column label="项目图标">

				<template slot-scope="scope">
					<el-image style="width: 100px; height: 100px" :src="scope.row.imageUrl"></el-image>
				</template>


			</el-table-column>

			<el-table-column label="操作" width="100">
				<template slot-scope="scope">
					<el-button @click="handleClick(scope.row)" type="text" size="small">修改</el-button>
					<el-button type="text" size="small" @click="delhandleClick(scope.row)">删除</el-button>
				</template>
			</el-table-column>
		</el-table>


		<div class="block">
			<el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="pageNo"
				:page-sizes="[10, 20, 30, 40]" layout="total, sizes, prev, pager, next, jumper" :total="total">
			</el-pagination>
		</div>

		<el-dialog title="收货地址" :visible.sync="dialogFormVisible">
			<el-form :model="pFrom">

				<el-form-item label="项目图标" :label-width="formLabelWidth">

					<el-upload class="avatar-uploader" action="http://localhost:60110/api-project/oss/upload"
						:show-file-list="false" :on-success="handleAvatarSuccess" :before-upload="beforeAvatarUpload">
						<img v-if="pFrom.imageUrl" :src="pFrom.imageUrl" class="avatar">
						<i v-else class="el-icon-plus avatar-uploader-icon"></i>
					</el-upload>
				</el-form-item>



				<el-form-item label="项目名" :label-width="formLabelWidth">
					<el-input v-model="pFrom.name" autocomplete="off"></el-input>
				</el-form-item>
				<el-form-item label="类别" :label-width="formLabelWidth">

					<el-select v-model="pFrom.typeId" placeholder="请选择">
						<el-option v-for="item in typeList" :key="item.id" :label="item.name" :value="item.id">
						</el-option>
					</el-select>
				</el-form-item>

				<el-form-item label="截止时间" :label-width="formLabelWidth">


					<el-date-picker v-model="pFrom.endTime" type="datetime" placeholder="选择日期时间">
					</el-date-picker>
				</el-form-item>

				<el-form-item label="预算" :label-width="formLabelWidth">
					<el-input v-model="pFrom.budget" autocomplete="off"></el-input>
				</el-form-item>
			</el-form>
			<div slot="footer" class="dialog-footer">
				<el-button @click="dialogFormVisible = false">取 消</el-button>
				<el-button type="primary" @click="addorupdate">确定</el-button>
			</div>
		</el-dialog>
	</div>

</template>

<!-- {
            "id": 10,
            "name": "Clarence Evans",
            "typeId": 622,
            "endTime": "2014-05-13",
            "budget": 10,
            "imageUrl": "https://img14.360buyimg.com/n1/s450x450_jfs/t1/240855/2/18613/161980/671f9217F0cd26bd6/3ff01504551ca51f.jpg",
            "typeName": "Hsuan On Na"
        }, -->

<script>
	import axios from "axios"
	export default {
		data() {
			return {
				projectList: [],
				dialogTableVisible: false,
				dialogFormVisible: false,
				formLabelWidth: '120px',
				pFrom: {
					id: '',
					name: '',
					typeId: '',
					endTime: '',
					budget: '',
					imageUrl: ''
				},
				rFrom: {
					name: '',
					typeId: ''
				},
				form: {
					name: '',
					region: '',
					date1: '',
					date2: '',
					delivery: false,
					type: [],
					resource: '',
					desc: ''

				},
				total: '',
				currentPage1: 5,
				currentPage2: 5,
				currentPage3: 5,
				currentPage4: 4,
				typeList: [],
				value: '',
				tiemValue: '',
				imageUrl: '',
				pageNo: 1,
				pageSize: 10
			}
		},
		created() {
			this.findAllProject();

			axios.get('http://localhost:60110/api-project-type/type/findAll').then(res => {
				console.log(res.data)
				this.typeList = res.data;
			})
		},
		methods: {
			findAllProject() {
				axios.post('http://localhost:60110/api-project/project/findAll?pageNo=' + this.pageNo + '&pageSize=' + this
					.pageSize, this.rFrom).then(res => {
					console.log(res)
					console.log(res.data)
					this.projectList = res.data.data.list
					this.total = res.data.data.total;
				})
			},

			addUser() {
				this.$router.push({
					path: '/useradd'
				})
			},
			handleAvatarSuccess(res, file) {
				console.log("111111111111111111111")
				console.log(res)
				console.log("222222222222222222")
				console.log(file)
				console.log("3333333333333333333333")
				this.pFrom.imageUrl = res;
			},
			beforeAvatarUpload(file) {
				// const isJPG = file.type === 'image/jpeg';
				// const isLt2M = file.size / 1024 / 1024 < 2;

				// if (!isJPG) {
				// 	this.$message.error('上传头像图片只能是 JPG 格式!');
				// }
				// if (!isLt2M) {
				// 	this.$message.error('上传头像图片大小不能超过 2MB!');
				// }
				return true;
			},
			addorupdate() {
				axios.post('http://localhost:60110/api-project/project/insertProject', this.pFrom).then(res => {
					let r = res.data.data;
					//{"code":1,"message":"SUCCESS","data":null}
					console.log(r)
					if (res.data.code == 1) {
						this.$message("成功");
						this.dialogFormVisible = false
						this.findAllProject();
					} else {
						this.$message.error("失败");
					}
				})


			},
			handleClick(row) {
				console.log(row);
				this.pFrom = row;
				this.dialogFormVisible = true
			},
			goAdd() {
				this.pFrom = {}
				this.dialogFormVisible = true
			},
			delhandleClick(row) {
				console.log(row);
				let id = row.id;
				axios.delete('http://localhost:60110/api-project/project/deleteProjectById/' + id).then(res => {
					let code = res.data.code;
					if (code == 1) {
						this.$message("删除成功");
						this.findAllProject();
					} else {
						this.$message.error("删除失败")
					}
				})

			},
			handleSizeChange(val) {
				console.log(`每页 ${val} 条`);
				this.pageSize = val;
				this.findAllProject();
			},
			handleCurrentChange(val) {
				console.log(`当前页: ${val}`);
				this.pageNo = val;
				this.findAllProject();
			}
		}
	}
</script>

<style>
	.avatar-uploader .el-upload {
		border: 1px dashed #d9d9d9;
		border-radius: 6px;
		cursor: pointer;
		position: relative;
		overflow: hidden;
	}

	.avatar-uploader .el-upload:hover {
		border-color: #409EFF;
	}

	.avatar-uploader-icon {
		font-size: 28px;
		color: #8c939d;
		width: 178px;
		height: 178px;
		line-height: 178px;
		text-align: center;
	}

	.avatar {
		width: 178px;
		height: 178px;
		display: block;
	}
</style>